{% extends 'base.html' %}

{% block body %}
<ul class='tabbed-menu'>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='1'>{{ 'Members'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='2'>{{ 'Email'|trans }}</button></li>
  <li><button type='button' class='btn' data-action='switch-tab' data-tabtarget='3'>{{ 'Procurement requests'|trans }}</button><span class='beta'>beta</span></li>
</ul>

{# loading spinner #}
<div class='d-flex justify-content-center' id='loading-spinner'>
  <div class='lds-dual-ring'></div>
</div>

{# TAB 1 MEMBERS #}
<div data-tabcontent='1' hidden>
  <div class='alert alert-success'><i class='fas fa-info-circle fa-fw color-success'></i>
  {{ 'You belong to the %s team.'|trans|format(App.Teams.teamArr.name) }}
  {{ 'Members'|trans }}: {{ teamsStats.active_users_count }} &ndash; {% trans %}Experiment{% plural teamsStats.totxp %}Experiments{% endtrans %}: {{ teamsStats.totxp }} ({{ teamsStats.totxpts }} timestamped) &ndash; {{ 'Resources'|trans }}: {{ teamsStats.totdb }}
  </div>

  <h3 class='p-2 pl-3 mb-3 section-title'>{{ 'Members'|trans }}</h3>
  {% include 'filter-input-snippet.html' with {'target': 'teamTable'} %}
  <div class='table-container'>
    <table class='table' aria-describedby='pageTitle' data-table-sort='true'>
      <thead>
        <tr>
            <th scope='col'>{{ 'Name'|trans }}</th>
            <th scope='col'>{{ 'Email'|trans }}</th>
            <th scope='col'>ORCID</th>
        </tr>
      </thead>
      <tbody id='teamTable'>
        {# archived users are hidden on this page #}
        {% for user in App.Users.readAllFromTeam()|filter(u => u.archived == 0) %}
        <tr>
          <td>
            <a href='experiments.php?owner={{ user.userid }}'>
              <span>
                {{ user.fullname }}
                {% if user.usergroup in range(1, 3) %}
                  ({{ 'Admin'|trans }})
                {% endif %}
              </span>
            </a>
          </td>
          <td><a href='mailto:{{ user.email|e('html_attr') }}'>{{ user.email }}</a></td>
          <td>{{ user.orcid }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# TAB 2 EMAIL #}
<div data-tabcontent='2' hidden>
  <h3 class='p-2 pl-3 mb-3 section-title'>{{ 'Send an email to users'|trans }}</h3>
  <form class='pl-3' method='post' action='app/controllers/TeamController.php' aria-label='{{ 'Mass email form'|trans }}'>
    {{ App.Session.get('csrf')|csrf }}
    <input type='hidden' name='emailUsers' />
    <label>{{ 'Send to'|trans }}</label>
    <div class='form-check'>
      <input class='form-check-input' type='radio' name='target' value='team' id='targetTeam' checked> <label class='form-check-label' for='targetTeam'>{{ 'Members of team %s'|trans|format(App.Teams.teamArr.name) }}</label>
    </div>
    {% for teamgroup in teamGroupsArr %}
      <div class='form-check'>
        <input class='form-check-input' type='radio' name='target' value='teamgroup_{{ teamgroup.id }}' id='targetTeamgroup_{{ teamgroup.id }}'> <label class='form-check-label' for='targetTeamgroup_{{ teamgroup.id }}'>{{ 'Members of teamgroup %s'|trans|format(teamgroup.name) }}</label>
      </div>
    {% endfor %}
    <div class='form-group'>
      <label for='emailSubject'>{{ 'Subject'|trans }}</label>
      <input type='text' id='emailSubject' name='subject' class='form-control' required />
      <label for='emailBody'>{{ 'Content'|trans }}</label>
      <textarea id='emailBody' name='body' class='form-control' rows='10' required></textarea>
    </div>
    <div class='mt-4 text-center'>
      <button type='submit' class='btn btn-primary'>{{ 'Send'|trans }}</button>
    </div>
  </form>
</div>

{# TAB 3 PROCUREMENT REQUESTS #}
<div data-tabcontent='3' hidden>
  <h3 class='p-2 pl-3 section-title'>{{ 'Procurement requests'|trans }}</h3>
  <div class='pl-3 my-2'>
    {% if teamProcurementRequestsArr %}
      {# DOWNLOAD as CSV #}
      <div class='mb-4 d-flex flex-row-reverse'>
        <a href='/api/v2/teams/current/procurement_requests?format=csv'><button type='button' class='btn btn-secondary'>{{ 'Download'|trans }} (.csv)</button></a>
      </div>
      {% include 'filter-input-snippet.html' with {'target': 'procurementRequestsTable'} %}

      {# MAIN TABLE #}
      <div class='table-container'>
        <table class='table' aria-label='{{ 'Procurement requests'|trans }}' data-table-sort='true'>
          <thead>
            <tr>
              <th scope='col'>{{ 'Resource'|trans }}</th>
              <th scope='col'>{{ 'Requester'|trans }}</th>
              <th scope='col'>{{ 'Ordered'|trans }}</th>
              <th scope='col'>{{ 'Quantity ordered'|trans }}</th>
              <th scope='col'>{{ 'Total'|trans }}</th>
              <th scope='col'>{{ 'Quantity received'|trans }}</th>
              <th scope='col'>{{ 'Comment'|trans }}</th>
              <!--th scope='col'>{{ 'Quote'|trans }}</th-->
              <th scope='col'>{{ 'State'|trans }}</th>
              <th scope='col'>{{ 'Actions'|trans }}</th>
            </tr>
          </thead>
          {# this is the element to reload after a change, don't use the full div so we keep the js working in table headers #}
          <tbody id='procurementRequestsTable'>
            {% for req in teamProcurementRequestsArr %}
              <tr>
                <td class='no-wrap' data-label='{{ 'Resource'|trans }}'>
                  <a href='/database.php?mode=view&amp;id={{ req.entity_id }}'>
                    <span class='hl-hover-gray p-2 mr-2 rounded'><i class='fas fa-eye'></i></span>
                  </a>{{ req.entity_title }}</td>
                {# REQUESTER #}
                <td data-label='{{ 'Requester'|trans }}'>{{ req.requester_fullname }}</td>
                {# CREATED AT #}
                <td data-label='{{ 'Ordered'|trans }}'><span title='{{ req.created_at }}' class='relative-moment text-nowrap'></span></td>
                {# QTY ORDERED #}
                <td data-label='{{ 'Quantity ordered'|trans }}'>{{ req.qty_ordered }}</td>
                {# TOTAL #}
                <td data-label='{{ 'Total'|trans }}'>{{ req.total }} {{ req.symbol }}</td>
                <td data-label='{{ 'Quantity received'|trans }}'><span class='hl-hover-gray p-1 rounded malleableColumn' data-endpoint='teams/current/procurement_requests' data-target='qty_received' data-input-type='number' data-id='{{ req.id }}'>{{ req.qty_received }}</span></td>
                <td data-label='{{ 'Comment'|trans }}'><span class='hl-hover-gray p-1 rounded malleableColumn {{ not req.body ? 'font-italic' }}' data-endpoint='teams/current/procurement_requests' data-target='body' data-id='{{ req.id }}'>{{ req.body|default('unset'|trans) }}</span></td>
                {# hide quote column until it is actually implemented
                <td data-label='{{ 'Quote'|trans }}'>
                  <a target='_blank' href='/api/v2/uploads/{{ req.quote }}?format=binary'>
                    <span class='hl-hover-gray p-1 mr-2 rounded'>{{ req.quote ? "<i class='fas fa-download'></i>" }}</span>
                  </a>
                </td>
                #}
                <td data-label='{{ 'State'|trans }}'><span class='hl-hover-gray p-1 rounded malleableState' data-id='{{ req.id }}'>{{ req.state_human }}</span></td>
                {# delete will actually cancel it #}
                <td data-label='{{ 'Actions'|trans }}'>
                  {% if req.state != enum('Elabftw\\Enums\\ProcurementState').Cancelled.value %}
                    <button class='btn hl-hover-gray p-1 rounded hover-danger lh-normal' title='{{ 'Cancel order'|trans }}' data-action='cancel-procurement-request' aria-label='{{ 'Cancel order'|trans }}' type='button' data-id='{{ req.id }}'>
                      <i class='fas fa-trash-alt'></i>
                    </button>
                {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %} {# no requests #}
      {# TODO add documentation link #}
        <p>{{ 'No procurement requests have been made yet.'|trans }}</p>
      {% endif %}
  </div>
</div>

{% endblock body %}
